<template>
  <div>
    javaPersonCount: {{ javaPersonCount }}<br/>
    pythonPersonCount: {{ pythonPersonCount }}<br/>
    <input :value="javaPersonCount"/><button @click="doIncrementJavaPersonCount">javaPersonCount++</button><br/>
    <input :value="pythonPersonCount"/><button @click="doIncrementPythonPersonCount">pythonPersonCount++</button><br/>
  </div>
</template>

<script>
// import store from "@/store";
export default {
  name: 'BaseUsage',
  data() {
    return {
      // javaPersonCount: store.state.javaPersonCount,        // 这种方式需要import
      // pythonPersonCount: this.$store.state.pythonPersonCount,     // 这种方式直接使用根组件上的store
    };
  },
  methods: {
    doIncrementJavaPersonCount() {
      this.$store.commit('incrementJavaPersonCount')
    },
    doIncrementPythonPersonCount() {
      this.$store.commit('incrementPythonPersonCount')
    },
  },
  computed: {
    javaPersonCount() {
      return this.$store.state.javaPersonCount
    },
    pythonPersonCount() {
      return this.$store.state.pythonPersonCount
    },
  }
}


</script>